<div class="panel panel-default file-upload-d">
        <br/>
        <div class="row" id="mutifile_container">
            <div class="col-sm-3 text-center file-upload-c"  class="droppable-area">
                <div id="advancedDropzone" >
                    <a class="fa fa-plus" style="font-size: small;color: #76d22d;"></a>
                </div>
            </div>
            <div class="col-sm-9">
                <table class="table table-bordered table-striped" id="example-dropzone-filetable">
                    <thead>
                    <tr>
                        <th width="35%">文件名称</th>
                        <th width="20%">上传进度</th>
                        <th width="15%">文件大小</th>
                        <th width="15%">上传状态</th>
                        <th width="15%" class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td colspan="5">文件列表将会出现在这里</td>
                    </tr>
                    </tbody>
                </table>
                <input type="text" class="hidden file_download_url{$field.opt}" name="{$field.name}"
                       value="{$field.value}"/>
            </div>
    </div>
    <script src="/static/js/qiniu.js"></script>
    <script src="/static/js/plupload.full.min.js"></script>
    <link rel="stylesheet" href="/static/css/sweetalert.css">
    <script src="/static/js/sweetalert.min.js"></script>
    <script>
        //数据回填
        (function () {
            var data = $(".file_download_url{$field.opt}").val();
            if (data != undefined && data !='') {
                $('#example-dropzone-filetable').find('tr td').remove();
                var $el = $('<tr>\
													<td>' + "{$field.value}" + '</td>\
													<td><div class="progress progress-striped"><div class="progress-bar progress-file-bar progress-bar-success"></div></div></td>\
													<td>暂无</td>\
													<td>已上传</td>\
													<td class="text-center"><a class="btn btn-icon btn-red del-file" style="border-radius: 50%;"><i class="fa-remove" style="width:30px;height:30px;background-color:red;border-radius:25px;line-height:20px;"></i></a></td>\
												</tr>');
                $('#example-dropzone-filetable').append($el);
                $('.progress-file-bar').width('100%');
                $('.del-file').on('click', function () {
                    swal({   title: "删除",
                            text: "确定要移除改文件？",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "删除",
                            closeOnConfirm: true,
                            allowOutsideClick:true
                        },
                        function(){
                            $('.del-file').parent().parent().remove();
                            $(".file_download_url{$field.opt}").val('');
                        });
                });
            }
        })();
        $.post("/file/uploader/uploadToken", function (response) {
            uploader = Qiniu.uploader({
                runtimes: 'html5,flash,html4',  // 上传模式，依次退化
                browse_button: 'advancedDropzone',       // 上传选择的点选按钮，必需
                container: 'mutifile_container',
                filters: {
                    max_file_size: '200mb',
                },
                flash_swf_url: 'js/plupload/Moxie.swf',
                dragdrop: false,
                chunk_size: '4mb',
                get_new_uptoken: true,
                uptoken: response.uptoken,
                domain: "{:config('qiniu.host')['download_host'];}",//"ohdqe117o.bkt.clouddn.com",
                unique_names: false,
                save_key: false,
                auto_start: true,                  //自动上传
                multi_selection: false,
                init: {
                    'FilesAdded': function (up, file) {
                        var size = parseInt(file[0].size / 1024, 10);
                        size = size < 1024 ? (size + " KB") : (parseInt(size / 1024, 10) + " MB");
                        $('#example-dropzone-filetable').find('tr td').remove();
                        var $el = $('<tr>\
													<td>' + file[0].name + '</td>\
													<td><div class="progress progress-striped"><div class="progress-bar progress-file-bar progress-bar-warning"></div></div></td>\
													<td>' + size + '</td>\
													<td class="upload-status-file">上传中</td>\
													<td class="text-center"><a class="btn btn-icon btn-red del-file" style="border-radius: 50%;"><i class="fa-remove  "  style="width:30px;height:30px;background-color:red;border-radius:25px;line-height:20px;"></i></a></td>\
												</tr>');
                        $('#example-dropzone-filetable').append($el);
                        $('.submit-btn').attr('disabled', 'disabled');
                    },
                    'BeforeUpload': function (up, file) {

                    },
                    'UploadProgress': function (up, file) {

                        total = file.size / 1024 / 1024,
                            current = file.loaded / 1024 / 1024,
                            percent = Math.floor(file.loaded / file.size * 100),
                            progressBar = $('.progress-file-bar');
                        progressBar.width(percent + '%');
                    },
                    'UploadComplete': function () {
                        $('.del-file').on('click', function () {
                            swal({   title: "删除",
                                    text: "确定要移除改文件？",
                                    type: "warning",
                                    showCancelButton: true,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: "删除",
                                    closeOnConfirm: true,
                                    allowOutsideClick:true
                                },
                                function(){
                                    $('.del-file').parent().parent().remove();
                                    $(".file_download_url{$field.opt}").val('');
                                });
                        });
                    },
                    'FileUploaded': function (up, file, info) {
                        $('#example-dropzone-filetable').find('tr td.upload-status-file').html('<span class="text-success">已上传</span>');
                        $('.progress-file-bar').removeClass('progress-bar-warning').addClass('progress-bar-success');
                        var res = $.parseJSON(info);
                        $(".file_download_url{$field.opt}").val(res.key);
                        $('.submit-btn').removeAttr('disabled');
                        if($('.file-upload-size').length >0){
                            $('.file-upload-size').val(file.size / 1024 / 1024);
                        }
                    },
                    'Error': function (up, err, errTip) {
                        console.log(up);
                        console.log(err);
                        console.log(errTip);
                    },
                    'Key': function (up, file) {
                        var path = "cms/gdu_tech/";
                        var key='';
                        if(Qiniu.getFileExtension(file.name)==''){
                            key = path + new Date().getTime();
                        }else{
                            key = path + new Date().getTime() + "." + Qiniu.getFileExtension(file.name);
                        }
                        return key;
                    }
                }
            });
        });
    </script>
</div>
<style>
    .btn-red:hover{
        background-color: #ffffff !important;
    }
    .btn-red:focus{
        background-color: #ffffff !important;
    }
    .file-upload-c{
        border:1px solid #c3c2c2;
        height: 80px;
        line-height: 80px;
    }
    #advancedDropzone a{
        border:2px dashed #76d22d;
        width: 20px;
        height: 16px;
    }
    .file-upload-d{
        width:130%;
    }
</style>